
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Template</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
</head>
<body>
<h1>I am using spring boot</h1>
<!-- ========================================== -->
<!-- dashboard AD -->
<div th:fragment="dashboard-ad">

    <div class="container">
        <h1 id="">Marking Assignment Template</h1>
        <p>For marking assignments in UIC</p>
        <p>Points:</p>
        <ol class="list-inline">
            <li> Idea </li>
            <li> Spring boot</li>
            <li> Mybatis-plus</li>
            <li> Mysql</li>
            <li> Thymeleaf</li>
            <li> BootStrap3.0</li>
        </ol>

    </div>
</div>
<!-- ========================================== -->
<!-- dashboard sidebar -->
<div th:fragment="ds-sidebar">
    <ul class="nav bs-docs-sidenav">

        <li class="">
            <a href="#addnewitem"><i class="fa fa-circle-o" aria-hidden="true"></i>
                Add Rubric</a>
        </li>
        <li class="">
            <a href="#rubriclist"><i class="fa fa-circle-o" aria-hidden="true"></i>
                Rubric List</a>

        </li>
        <li class="">
            <a href="#importstudents"><i class="fa fa-circle-o" aria-hidden="true"></i>
                Import Students</a>
        </li>
        <li class="">
            <a href="#markgroup"><i class="fa fa-circle-o" aria-hidden="true"></i>
                Mark Group</a>
        </li>
    </ul>
</div>

<!-- ========================================== -->

<div th:fragment="markgroup">
    <h3 id="markgroup">Select Mark Group </h3>
    <hr></hr>
    <div class="markgroup">

        <div class="list-group">
            <a href="#" th:href="@{/teacher/mark/__${sc.classes}__/__${sc.rubricid}__}" class="list-group-item" th:each="sc:${studentcategory}" th:text="${sc.classes}">
                Cras justo odio
            </a>

        </div>
    </div>

</div>

<!-- ========================================== -->
<!--import student page -->
<div th:fragment="importstudents">
    <h3 id="importstudents">Import Students </h3>
    <hr></hr>
    <div class="importstudents">
        <form enctype="multipart/form-data" method="post" action="/teacher/uploadfile" style="margin-bottom: 100px;">
            <div class="form-group">
                <label>Select student name list excel file</label>
                <input id="file-4" type="file" name="file" class="file" data-upload-url="#"/>
            </div>

            <div class="form-group">
                <label>Select Rubric</label>
                <select class="form-control" name="selectrubricid">
                    <button type="button" class="list-group-item"  th:each="rubric:${rubrics}"  th:id="${rubric.id}" th:text="${rubric.name}">Cras justo odio</button>

                    <option th:each="rubric:${rubrics}"  th:value="${rubric.id}" th:text="${rubric.name}">1</option>

                </select>
            </div>

            <hr/>
            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
                <button class="btn btn-default" type="reset">Reset</button>
            </div>
        </form>
    </div>

</div>
<!-- ========================================== -->
<!-- dashboard rubric list -->
<div th:fragment="rubriclist">
    <h3 id="rubriclist">Rubric List </h3>
    <hr></hr>
    <div class="rubriclist">
        <div class="row">
            <div class="col-md-4 rubric" role="main" style="background-color: #9acfea">
                <div class="list-group">
                    <button type="button" class="list-group-item"  th:each="rubric:${rubrics}"  th:id="${rubric.id}" th:text="${rubric.name}">Cras justo odio</button>
                </div>

            </div>


            <div class="col-md-7" role="main" >
                <div class="rule">
                    <table class="table table-bordered">
                        <tr>
                            <th style="display: none">Item</th>
                            <th>Item</th>
                            <th>Percentage</th>
                        </tr>
                        <!--<tr>-->
                        <!--<td style="display: none">Item</td>-->
                        <!--<td>Item</td>-->
                        <!--<td>Percentage</td>-->
                        <!--</tr>-->
                    </table>
                </div>
            </div>
        </div>

    </div>


</div>

<!-- ========================================== -->
<!-- dashboard add new rubric -->
<div th:fragment="schema">
    <h3 id="addnewitem">Add New Item <i class="fa fa-plus-circle additem" aria-hidden="true"></i>
    </h3>
    <hr></hr>
    <div class="schemaitem">
        <!--<button id="enable" class="btn btn-default">enable / disable</button>-->
        <div class="panel panel-default">
            <div class="panel-heading" id="schematitle">Course Title:</div>
            <div class="panel-heading" id="schemadate" data-format="yyyy-mm-dd">2017-05-10</div>

            <table class="table table-bordered " id="schematable">
                <tr class="info">
                    <th>Item</th>
                    <th>Percentage</th>
                    <th>Action</th>
                </tr>
                <tr class="item">
                    <td>Assignment</td>
                    <td>30</td>
                    <th onclick="remove(this)">Remove</th>
                </tr>
                <tr class="item">
                    <td>Quiz</td>
                    <td>20</td>
                    <th onclick="remove(this)">Remove</th>
                </tr>
                <tr class="item">
                    <td>Project</td>
                    <td>50</td>
                    <th onclick="remove(this)">Remove</th>
                </tr>

            </table>
        </div>
        <button id="save-btn" class="btn btn-primary">Save new Schema!</button>
    </div>


</div>

</body>
</html>